<template>
  <el-form label-width="80px">
    <el-form-item label="SPU名称">
      <span style="font-weight: bold">{{ spu.spuName }}</span>
    </el-form-item>
    <el-form-item label="SKU名称">
      <el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input placeholder="价格(元)" v-model="skuInfo.price" type="number"></el-input>
    </el-form-item>
    <el-form-item label="重量(千克)">
      <el-input placeholder="重量(千克)" v-model="skuInfo.weight"></el-input>
    </el-form-item>
    <el-form-item label="规格描述">
      <el-input type="textarea" rows="4" v-model="skuInfo.skuDesc"></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form :inline="true" label-width="160px">
        <el-form-item style="margin-bottom: 20px" :label="attr.attrName" v-for="attr in attrInfoList" :key="attr.id">
          <el-select placeholder="请选择" v-model="attr.attrIdAndValueId">
            <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`"
                       v-for="attrValue in attr.attrValueList"
                       :key="attrValue.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form :inline="true">
        <el-form-item :label="saleAttr.saleAttrName" v-for="saleAttr in supSaleAttrList" :key="saleAttr.id">
          <el-select placeholder="请选择" v-model="saleAttr.attrIdAndValueId">
            <el-option :label="saleAttrValue.saleAttrValueName" :value="`${saleAttr.id}:${saleAttrValue.id}`"
                       v-for="saleAttrValue in saleAttr.spuSaleAttrValueList"
                       :key="saleAttrValue.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片列表">
      <el-table border :data="spuImageList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="图片" align="center">
          <template v-slot="{row}">
            <img style="height: 100px;width: 100px" :src="row.imgUrl">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button type="primary" v-if="row.isDefault==0" @click="changeDefault(row)">设置默认</el-button>
            <el-button v-else>默认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>


<script>
import {reqAddSku, reqAttrInfoList2, reqSpuImageList2, reqSpuSaleAttrList2} from "../api/realRequests";
import {ElMessage} from "element-plus";

export default {
  name: "SpuForm",
  data() {
    return {
      // skuform图片列表
      spuImageList: [],
      // skuform销售属性的数据
      supSaleAttrList: [],
      // skuform平台属性的数据
      attrInfoList: [],
      // 收集sku数据的字段
      skuInfo: {
        // 第一类收集的数据：父子件给的数据
        category3Id: 0,
        spuId: 0,
        tmId: 0,
        // 第二类收集的数据：需要通过数据双向绑定v-model收集
        skuName: '',
        price: 0,
        weight: '',
        skuDesc: '',
        // 第三类收集的数据：需要自己写代码收集
        // 默认图片
        skuDefaultImg: "",
        // 平台属性
        skuAttrValueList: [],
        // 收集图片的字段
        skuImageList: [],
        // 销售属性
        skuSaleAttrValueList: [],
      },
      //
      spu: {},
      // 图片列表中用户勾选的行
      imageList: []
    }
  },
  methods: {
    // 获取skuform数据
    async getData(categoryOneId, categoryTwoId, spu) {
      // 收集父组件基于的数据
      this.skuInfo.category3Id = spu.category3Id
      this.skuInfo.spuId = spu.id
      this.skuInfo.tmId = spu.tmId

      this.spu = spu
      // 获取skuform图片信息
      let res = await reqSpuImageList2(spu.id)
      // console.log('skuform图片信息',res)
      if (res.code == 200) {
        this.spuImageList = res.data
        // 接受到服务器返回的数据后，给每条图片信息都添加一个isDefault字段，以便切换是否默认
        this.spuImageList.forEach(item => {
          item.isDefault = 0
        })
      }
      // 获取销售属性的数据
      let res2 = await reqSpuSaleAttrList2(spu.id)
      // console.log('销售属性的数据',res2)
      if (res.code == 200) {
        this.supSaleAttrList = res2.data
      }
      // 获取平台属性的数据
      // console.log(spu.category3Id)
      let res3 = await reqAttrInfoList2(categoryOneId, categoryTwoId, spu.category3Id)
      // console.log(res3)
      if (res3.code == 200) {
        this.attrInfoList = res3.data
      }
    },
    // 表格第一列被勾选的行发生变化时触发
    // elementplus自动注入了参数data,也就是一个数组，里面包含被勾选的行(的数据)
    handleSelectionChange(data) {
      // console.log('elementplus注入的参数为：', data)
      // 获取到图片列表中用户选中行的数据，收集的数据
      this.imageList = data
    },
    // 图片列表最后一列 默认和设置默认按钮的切换 以及 该列的排他操作(该列只能有一个为默认状态，也就是 isDefault==1)
    // row为当前行(点击的这一行)
    changeDefault(row) {
      // 先讲该列的isDefault全部设置为0
      this.spuImageList.forEach(item => {
        item.isDefault = 0
      })
      // 再将当前点击的行的isDefault设置为1
      row.isDefault = 1
      // 将当前已被设置为默认图片的地址进行收集
      this.skuInfo.skuDefaultImg = row.imgUrl
    },
    // 取消
    cancel() {
      // 自定义事假，让父组件切换场景
      this.$emit('changeScenes')
      // 清除数据
      this.skuInfo = {}
    },
    // 保存
    async save() {
      // 整理参数
      // 整理平台属性
      const attrInfoList = this.attrInfoList // 解构
      const skuInfo = this.skuInfo
      attrInfoList.forEach(item => {
        // 有attrIdAndValueId这个属性，代表用户已经进行了选择
        if (item.attrIdAndValueId) {
          // 把attrIdAndValueId进行截取
          const attrId = item.attrIdAndValueId.split(':')[0]
          const valueId = item.attrIdAndValueId.split(':')[1]
          // 携带给服务器的参数是一个对象
          let obj = {attrId, valueId}
          skuInfo.skuAttrValueList.push(obj)
        }
      })
      // 整理销售属性
      const spuSaleAttrList = this.supSaleAttrList
      spuSaleAttrList.forEach(item => {
        // 有attrIdAndValueId这个属性，代表用户已经进行了选择
        if (item.attrIdAndValueId) {
          // 把attrIdAndValueId进行截取
          const saleAttrId = item.attrIdAndValueId.split(':')[0]
          const saleAttrValueId = item.attrIdAndValueId.split(':')[1]
          // 携带给服务器的参数是一个对象
          let obj = {saleAttrId, saleAttrValueId}
          skuInfo.skuSaleAttrValueList.push(obj)
        }
      })
      // 整理图片列表
      const imageList = this.imageList
      skuInfo.skuImageList = imageList.map(item => {// map会返回一个映射后的数组
        return {
          imgName: item.imgName,
          imgUrl: item.imgUrl,
          isDefault: item.isDefault,
          spuImgId: item.id
        }
      })
      // 发送请求
      let res = await reqAddSku(skuInfo)
      // console.log(res)
      if (res.code == 200) {
        ElMessage({message: '添加sku成功！', type: 'success', duration: 2000, center: true})
        this.$emit('changeScenes')
        // 清除数据
        this.skuInfo = {}
      }
    }
  }
}
</script>

<style scoped>

</style>